<!DOCTYPE html>
<html>
<head>
	<title>Sortable Table using Polymer Web Components</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<script src="../../platform/platform.js"></script>
	<link rel="import" href="../sortable-table.html">
	<link rel="import" href="fruit-icon.html">
	<link rel="import" href="index-links.html">
</head>
<body unresolved>

	<h2>Row Editor</h2>

	<b><em>Double clicking</em></b> on a row should transform the row into the <code>rowEditorTemplate</code>.<br>
	Within an edit, formulas should work, templates should work, and original data should be modified and reflected in the table.<br>
	Undo should undo all columns, as well as footers.

	<p>

	<template is="auto-binding">
		<sortable-table defaultStyle rowTemplate="row" rowEditorTemplate="editor">
			<sortable-column name="fruit" footerTemplate="footerLabel">Fruit</sortable-column>
			<sortable-column name="alice" footerTemplate="footer">Alice</sortable-column>
			<sortable-column name="bill" footerTemplate="footer">Bill</sortable-column>
			<sortable-column name="casey" footerTemplate="footer">Casey</sortable-column>
			<sortable-column name="average" formula="average" footerTemplate="footer">Average</sortable-column>
			<sortable-column name="total" formula="total" footerTemplate="footer">Total</sortable-column>

			<template id="row">
				<td style="width:250px;text-align:left;">
					<fruit-icon fruit="{{record.row.fruit}}"></fruit-icon>{{record.row.fruit}}
				</td>
				<td style="width:20%;text-align:right">{{record.row.alice}}</td>
				<td style="width:20%;text-align:right">{{record.row.bill}}</td>
				<td style="width:20%;text-align:right">{{record.row.casey}}</td>
				<td style="text-align:right">{{record.row | average(record.row.alice,record.row.bill,record.row.casey)}}</td>
				<td style="text-align:right">{{record.row | total(record.row.alice,record.row.bill,record.row.casey)}}</td>
			</template>
			<template id="editor">
				<td style="width:250px;box-shadow: 0 0 4px 1px #FBBA37 inset;text-align:left;">
					<fruit-icon fruit="{{record.row.fruit}}"></fruit-icon>
					<select value="{{record.row.fruit}}" style="width:150px; height:27px; font-size: large; margin:0px;">
						<option></option>
						<option value="apple">apple</option>
						<option value="banana">banana</option>
						<option value="grape">grape</option>
						<option value="pear">pear</option>
						<option value="strawberry">strawberry</option>
					</select>
				</td>
				<td style="box-shadow: 0 0 4px 1px #FBBA37 inset;text-align:right;">
					<input type="number" value="{{record.row.alice}}" on-change="{{refreshFooter}}" style="text-align:right;font-size:large;height:20px;width:100px;margin:0px;">
					<button on-click="{{closeEdit}}" title="Done" style="vertical-align:top">&#10004;</button>
					<button on-click="{{cancelEdit}}" title="Undo" style="vertical-align:top">&#10008;</button>
				</td>
				<td style="box-shadow: 0 0 4px 1px #FBBA37 inset;text-align:right;">
					<input type="number" value="{{record.row.bill}}" on-change="{{refreshFooter}}" style="text-align:right;font-size:large;height:20px;width:100px;margin:0px;">
					<button on-click="{{closeEdit}}" title="Done" style="vertical-align:top">&#10004;</button>
					<button on-click="{{cancelEdit}}" title="Undo" style="vertical-align:top">&#10008;</button>
				</td>
				<td style="box-shadow: 0 0 4px 1px #FBBA37 inset;text-align:right;">
					<input type="number" value="{{record.row.casey}}" on-change="{{refreshFooter}}" style="text-align:right;font-size:large;height:20px;width:100px;margin:0px;">
					<button on-click="{{closeEdit}}" title="Done" style="vertical-align:top">&#10004;</button>
					<button on-click="{{cancelEdit}}" title="Undo" style="vertical-align:top">&#10008;</button>
				</td>
				<td style="box-shadow: 0 0 8px 1px #FFEEDD inset;text-align:right;">{{record.row | average(record.row.alice,record.row.bill,record.row.casey)}}</td>
				<td style="box-shadow: 0 0 8px 1px #FFEEDD inset;text-align:right;">{{record.row | total(record.row.alice,record.row.bill,record.row.casey)}}</td>
			</template>
			<template id="footer">
				<td class="sortable-table-footer" style="text-align:right">{{values | sum}}</td>
			</template>
			<template id="footerLabel">
				<td class="sortable-table-footer" style="text-align:left">Total Fruit Per Person</td>
			</template>

			[
				{ fruit: 'apple', alice: 4, bill: 10, casey: 2 },
				{ fruit: 'banana', alice: 0, bill: 4, casey: 0 },
				{ fruit: 'grape', alice: 2, bill: 3, casey: 5 },
				{ fruit: 'pear', alice: 4, bill: 2, casey: 8 },
				{ fruit: 'strawberry', alice: 0, bill: 14, casey: 0 }
			]
		</sortable-table>
	</template>

	<script>
		window.addEventListener('polymer-ready', function(){
			PolymerExpressions.prototype.average = function(row){
				return Math.round((+row.alice + +row.bill + +row.casey)/3*10)/10;
			}
			PolymerExpressions.prototype.total = function(row){
				return +row.alice + +row.bill + +row.casey;
			}
			PolymerExpressions.prototype.sum = function(arr) {
				return Math.round(arr.reduce(function(a, b) { return +a + +b; }, 0));
			}
		})
	</script>

	<index-links page="row-editor.html"></index-links>
</body>
</html>